<!doctype html>
<html>
    <head>
        <title>jsPlumb Toolkit - Groups</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!-- CSS -->
        <link rel="stylesheet" href="node_modules/@jsplumbtoolkit/browser-ui/css/jsplumbtoolkit.css">
        <link rel="stylesheet" href="node_modules/@jsplumbtoolkit/browser-ui/css/jsplumbtoolkit-demo-support.css">
        <!-- /CSS -->
        <link rel="stylesheet" href="app.css">
    </head>
    <body>

        <!-- content -->
        <script type="jtk" id="tmplNode">
            <div style="width:{{w}}px;height:{{h}}px;" data-jtk-target="true">
                {{name}}
                <div class="delete" title="Click to delete"/>
                <div class="connect" data-jtk-source="true"/>
            </div>
        </script>

        <script type="jtk" id="tmplGroup">
            <div data-jtk-target="true">
                <div class="group-title">
                    {{title}}
                    <button class="expand"></button>
                    <button class="group-delete"></button>
                </div>
                <div data-jtk-group-content="true"></div>
                <div class="group-connect connect" data-jtk-source="true">
                    <i class="fa fa-chain"></i>
                </div>
            </div>
        </script>

        <script id="tmplElasticGroup" type="jtk">
            <div data-jtk-target="true" class="headless-group">
                <button class="expand"></button>
                <button class="group-delete"></button>
                <div class="group-connect connect" data-jtk-source="true"/>
            </div>
        </script>


        <div class="jtk-demo-main">

            <!-- this is the main drawing area -->
            <div class="jtk-demo-canvas">
                <!-- controls -->
                <div class="controls">
                    <i class="fa fa-arrows selected-mode" mode="pan" title="Pan Mode"></i>
                    <i class="fa fa-pencil" mode="select" title="Select Mode"></i>
                    <i class="fa fa-home" reset title="Zoom To Fit"></i>
                    <i class="fa fa-undo" undo title="Undo last action"></i>
                    <i class="fa fa-repeat" redo title="Redo last action"></i>
                </div>
                <!-- miniview -->
                <div class="miniview"></div>
            </div>

            <div class="jtk-demo-rhs">
                <a href="../../../index.html" class="p-1">Back to demo list</a>
                <div class="sidebar node-palette">
                    <div title="Drag Node to canvas" data-type="default" class="sidebar-item">
                        <i class="icon-tablet"></i>Drag Node
                    </div>
                    <div title="Drag Group to canvas" data-jtk-is-group="true" data-type="default"
                         class="sidebar-item">
                        <i class="icon-tablet"></i>Drag Group
                    </div>
                    <div title="Drag Group to canvas" data-jtk-is-group="true" data-type="elastic"
                         class="sidebar-item">
                        <i class="icon-tablet"></i>Drag Elastic Group
                    </div>
                </div>
                <div class="description">
                    <div class="h3">Nested Groups</div>
                    <p>The Toolkit has comprehensive support for groups, which can be nested to an arbitrary level. When groups are collapsed any edges to/from
                        children of the group are relocated to the group. You can collapse and expand groups in this demo with the `-` and `+` buttons.
                    </p>
                    <p>Group 1 in this demo has `autoSize` switched on, and will resize when new nodes are dropped into the group, or nodes are deleted or dragged
                        out.</p>
                    <p>Group 2 has `constrain` set, meaning that child nodes cannot be dragged outside of its bounds.</p>

                    <div class="h5 my-3">Elastic Groups</div>
                    <p>The headless group in this app is an <strong>elastic</strong> group, which is a type of group that is available from 6.10.0 onwards. When you drag a child node
                        around in an elastic group, the group will resize to always encompass its child nodes (while still respecting any <code>minSize</code> or <code>maxSize</code> you
                        may have set).  If you want to drag a node out of an elastic group, hold down the Shift key while dragging. </p>
                    <p>By default, an elastic group will resize from any edge. This can be switched off programmatically via setting `allowResizeFromOrigin:false` on a
                        group definition, and you can also switch it off on an ad-hoc basis by holding down the Ctrl or Meta key while dragging (on a Mac the Meta key
                        is the Command key).
                    </p>

                    <div class="h5 my-3">Further reading</div>
                    <p>
                        Read about this demo itself in our docs: <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/starter-app-groups" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/starter-app-groups</a>
                    </p>
                    <p>
                        Read about groups in detail here:<a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/groups" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/groups</a>
                    </p>
                </div>
            </div>



        </div>
        <!-- /content -->



        <!-- demo -->
        <script src="node_modules/@jsplumbtoolkit/browser-ui/js/jsplumbtoolkit.browser-ui.umd.js"></script>
        <script src="demo.js"></script>
        <!-- /demo -->

    </body>
</html>
